<template>
  <div class="order-detail app-container">
    <div class="order-info">
      <h3>订单编号：{{ data?.orderSn }}</h3>
      <el-descriptions>
        <el-descriptions-item label="下单时间:">{{ data?.orderTime }}</el-descriptions-item>
        <el-descriptions-item label="用户名称:">{{ data?.userName }}</el-descriptions-item>
        <el-descriptions-item label="设备编号:">
          {{ data?.machineId }}
        </el-descriptions-item>
        <el-descriptions-item label="支付时间:">
          {{ data?.payTime }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式:">{{ data?.userMobile }} </el-descriptions-item>
        <el-descriptions-item label="设备名称:">{{ data?.machineName }} </el-descriptions-item>
        <el-descriptions-item label="订单类型:">
          <dict-tag class="inline-block" :options="order_origin" :value="data?.orderType" />
        </el-descriptions-item>
        <el-descriptions-item label="操作人:">
          {{ data?.updateName ?? data.exceptionOper ?? '—' }}
        </el-descriptions-item>
        <el-descriptions-item label="点位名称:"> {{ data?.positionName }}</el-descriptions-item>
        <el-descriptions-item label="支付方式:">
          <dict-tag class="inline-block" :options="order_paytype" :value="data?.payType" />
        </el-descriptions-item>
        <el-descriptions-item label="操作时间:">
          {{ data?.updateTime || '—' }}
        </el-descriptions-item>
        <el-descriptions-item label="设备地址:"> {{ data?.positionAddr }}</el-descriptions-item>
        <el-descriptions-item label="城市标签:">
          {{ cityNameOptions.find((i) => i === data?.cityName) }}</el-descriptions-item
        >
        <el-descriptions-item label="订单备注:" span="3">
          {{ data?.remark ?? '无' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="order-stat flex-center" :class="payStatusObj.className">
      <div>{{ payStatusObj?.label }}</div>
    </div>
  </div>
</template>

<script setup>
import useGlobalStore from '@/store/modules/global'

const globalStore = useGlobalStore()
const cityNameOptions = computed(() => globalStore.myCityList)
const { proxy } = getCurrentInstance()
const { order_paytype, order_status, order_origin } = proxy.useDict(
  'order_paytype',
  'order_status',
  'order_origin'
)
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

const classNames = ['info', 'primary', 'success', 'warning', 'danger']
const payStatusObj = computed(() => {
  let obj = {}
  if (order_status.value?.length && props.data?.payStatus) {
    order_status.value?.map(({ value, label }) => {
      if (value == props.data.payStatus) {
        obj = { className: classNames[value - 1] ?? 'primary', label }
      }
    })
  }
  return obj
})
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fff;
}
.order-detail {
  min-width: 900px;
  display: flex;
  justify-content: space-between;
  .order-info {
    width: 900px;
  }
  .order-stat {
    width: 4em;
    > div {
      width: 1.1em;
      line-height: 2;
      font-weight: bold;
      font-size: 24px;
      color: #fff;
    }
  }
}

.primary {
  background-color: var(--el-color-primary);
}
.warning {
  background-color: var(--el-color-warning);
}
.danger {
  background-color: var(--el-color-danger);
}
.success {
  background-color: var(--el-color-success);
}
.info {
  background-color: var(--el-color-info-light-3);
}
</style>
